<template>
  <div class="laptops-page">
    <div class="page-header">
      <h1>华为笔记本</h1>
      <p>智慧办公，高效生产力</p>
    </div>

    <el-row :gutter="20">
      <el-col :span="6" v-for="laptop in laptops" :key="laptop.id">
        <el-card class="laptop-card" shadow="hover" @click="viewDetail(laptop.id)">
          <div class="product-image-container">
            <img :src="laptop.image" :alt="laptop.name" class="product-image">
            <div class="product-badge" v-if="laptop.isNew">新品</div>
            <div class="product-badge discount" v-if="laptop.discount">热销</div>
          </div>
          <div class="product-info">
            <h3>{{ laptop.name }}</h3>
            <p class="product-desc">{{ laptop.description }}</p>
            <div class="product-price">
              <span class="current-price">¥{{ laptop.price }}</span>
              <span class="original-price" v-if="laptop.originalPrice">¥{{ laptop.originalPrice }}</span>
            </div>
            <div class="product-specs">
              <span class="spec-tag" v-for="spec in laptop.specs" :key="spec">{{ spec }}</span>
            </div>
            <div class="product-actions">
              <el-button type="primary" size="small" @click="viewDetail(laptop.id)">查看详情</el-button>
              <el-button type="success" size="small" @click="addToCart(laptop)">加入购物车</el-button>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { useCartStore } from '@/stores/cart'

const router = useRouter()
const cartStore = useCartStore()

const laptops = ref([
  {
    id: 'matebook-x-pro',
    name: 'HUAWEI MateBook X Pro',
    price: '8999',
    originalPrice: '9999',
    description: '旗舰轻薄本，3K触控全面屏',
    image: 'https://via.placeholder.com/300x300/001f3f/FFFFFF?text=MateBook+X+Pro',
    specs: ['13代酷睿', '3K触控屏', '1.26kg'],
    isNew: true,
    discount: true
  },
  {
    id: 'matebook-14',
    name: 'HUAWEI MateBook 14',
    price: '5999',
    originalPrice: '6999',
    description: '2K全面屏，高性能轻薄本',
    image: 'https://via.placeholder.com/300x300/003366/FFFFFF?text=MateBook+14',
    specs: ['12代酷睿', '2K屏', '便携设计'],
    isNew: false,
    discount: true
  },
  {
    id: 'matebook-d15',
    name: 'HUAWEI MateBook D15',
    price: '4299',
    description: '大屏轻薄本，护眼全面屏',
    image: 'https://via.placeholder.com/300x300/4A90E2/FFFFFF?text=MateBook+D15',
    specs: ['11代酷睿', '15.6英寸', '护眼屏'],
    isNew: false,
    discount: false
  },
  {
    id: 'matebook-e',
    name: 'HUAWEI MateBook E',
    price: '5999',
    description: '二合一笔记本，灵动随心',
    image: 'https://via.placeholder.com/300x300/7ED321/FFFFFF?text=MateBook+E',
    specs: ['二合一设计', '触控屏', '便携'],
    isNew: true,
    discount: false
  },
  // 新增四个笔记本
  {
    id: 'matebook-16',
    name: 'HUAWEI MateBook 16',
    price: '6999',
    originalPrice: '7999',
    description: '大屏创作本，专业设计',
    image: 'https://via.placeholder.com/300x300/5856D6/FFFFFF?text=MateBook+16',
    specs: ['16英寸', '专业色准', '高性能'],
    isNew: true,
    discount: true
  },
  {
    id: 'matebook-d14',
    name: 'HUAWEI MateBook D14',
    price: '4599',
    description: '主流轻薄本，均衡性能',
    image: 'https://via.placeholder.com/300x300/FF9500/FFFFFF?text=MateBook+D14',
    specs: ['14英寸', '轻薄设计', '长续航'],
    isNew: false,
    discount: false
  },
  {
    id: 'matebook-b5',
    name: 'HUAWEI MateBook B5',
    price: '7999',
    originalPrice: '8999',
    description: '商务旗舰，安全可靠',
    image: 'https://via.placeholder.com/300x300/34C759/FFFFFF?text=MateBook+B5',
    specs: ['商务安全', 'TPM加密', '企业级'],
    isNew: false,
    discount: true
  },
  {
    id: 'matebook-x1',
    name: 'HUAWEI MateBook X1',
    price: '12999',
    description: '超轻薄旗舰，极致工艺',
    image: 'https://via.placeholder.com/300x300/FF2D55/FFFFFF?text=MateBook+X1',
    specs: ['超轻薄', '碳纤维', '顶级工艺'],
    isNew: true,
    discount: false
  }
])

const viewDetail = (laptopId) => {
  router.push(`/goods/${laptopId}`)
}

const addToCart = (laptop) => {
  cartStore.addToCart({
    id: laptop.id,
    name: laptop.name,
    price: laptop.price,
    image: laptop.image,
    description: laptop.description
  }, 1)
  ElMessage.success(`已添加 ${laptop.name} 到购物车`)
}
</script>

<style scoped>
.laptops-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.page-header {
  text-align: center;
  margin-bottom: 40px;
  padding: 20px 0;
}

.page-header h1 {
  color: #c7000a;
  font-size: 32px;
  margin-bottom: 10px;
}

.page-header p {
  color: #666;
  font-size: 16px;
}

.laptop-card {
  margin-bottom: 20px;
  transition: all 0.3s;
  cursor: pointer;
}

.laptop-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.product-image-container {
  position: relative;
}

.product-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.product-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: #ff4757;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;
}

.product-badge.discount {
  background: #ffa502;
  top: 40px;
}

.product-info {
  padding: 15px;
}

.product-info h3 {
  margin: 0 0 10px;
  color: #333;
  font-size: 18px;
  height: 24px;
  overflow: hidden;
}

.product-desc {
  color: #666;
  margin-bottom: 10px;
  font-size: 14px;
  height: 40px;
  overflow: hidden;
  line-height: 1.4;
}

.product-price {
  margin: 10px 0;
}

.current-price {
  color: #c7000a;
  font-size: 20px;
  font-weight: bold;
}

.original-price {
  color: #999;
  text-decoration: line-through;
  margin-left: 8px;
  font-size: 14px;
}

.product-specs {
  margin: 10px 0;
}

.spec-tag {
  display: inline-block;
  background: #f0f2f5;
  color: #666;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 12px;
  margin-right: 5px;
  margin-bottom: 5px;
}

.product-actions {
  display: flex;
  gap: 8px;
  margin-top: 15px;
}

.product-actions .el-button {
  flex: 1;
}
</style>